<script lang="ts" setup>
import { getUserList } from "_s/config/user";
import { postRoleUpdateUser } from "_s/config/role";
import Search from "_c/search/index.vue";
import useTablePagination from "_s/hooks/usePagination";
const { pagination } = useTablePagination();
import type { userInfoType } from "_s/config/user/type";
import type { QTableProps } from "quasar";
import { QAvatar } from "quasar";
const { notify, loading } = useQuasar();
import { thumbStyle } from "_s/common/quasarStyle";
const diaload = defineModel<boolean>();
const emits = defineEmits(["update"]);
const props = defineProps(["info"]);

const selected = ref<userInfoType[]>([]);
if (props.info.users) {
  selected.value = props.info.users as userInfoType[];
}

const search = ref("");
const handleSearch = () => {
  pagination.value.page = 1;
  void getdata();
};

const getpage = (props: any) => {
  pagination.value = props.pagination;
  void getdata();
};

//#region table 数据
const tableData = ref<userInfoType[]>([]);
const getdata = async () => {
  const { code, data, msg } = await getUserList({
    page: pagination.value.page,
    pageSize: pagination.value.rowsPerPage,
    keyword: search.value
  });
  if (code == 0) {
    tableData.value = data.data;
    pagination.value.rowsNumber = data.total;
  } else {
    notify({
      message: msg,
      type: "error"
    });
  }
};
void getdata();
//#endregion

//#region  table Columns table 数据
const tableColums: QTableProps["columns"] = [
  {
    name: "name",
    label: "用户名",
    align: "left",
    field: row => {
      return h(
        "div",
        {
          class: "row"
        },
        [
          h(
            QAvatar,
            {
              size: "50px"
            },
            {
              default: () =>
                h("img", {
                  src: "https://picsum.photos/100/100?1"
                })
            }
          ),
          h(
            "div",
            {
              class: "q-ml-md q-mt-sm "
            },
            [
              h(
                "samp",
                {
                  class: { "text-grey-6": row.username }
                },
                row.username
              )
            ]
          )
        ]
      );
    }
  },
  {
    name: "name",
    label: "姓名",
    align: "left",
    field: "name"
  }
];
//#endregion

const submit = async () => {
  loading.show();
  const users = selected.value.map(item => item.id);
  const { code, msg } = await postRoleUpdateUser({
    id: props.info.id,
    userIds: users
  });
  loading.hide();
  if (code == 0) {
    notify({
      message: "操作成功",
      type: "success"
    });
    diaload.value = false;
    emits("update");
  } else {
    notify({
      message: msg,
      type: "error"
    });
  }
};
const cancel = () => {
  diaload.value = false;
};

const delUser = (item: userInfoType) => {
  const index = selected.value.findIndex(i => i.id == item.id);
  if (index > -1) {
    selected.value.splice(index, 1);
  }
};
</script>

<template>
  <q-card class="container q-pa-lg">
    <q-card-section>
      <div class="text-h6">角色绑定用户</div>
    </q-card-section>
    <q-separator inset />
    <q-card-section>
      <div class="row">
        <!-- <div class="userlist q-mt-sm">已选择的用户 -->

        <q-list class="userlist">
          <q-item-label header>
            {{ selected.length > 0 ? "已选择的用户" : "暂未绑定用户" }}
          </q-item-label>

          <TransitionGroup name="list">
            <q-item
              dense
              class="q-mt-sm"
              v-for="item in selected"
              :key="item.id"
            >
              <!-- <q-item-section avatar top>
              <q-avatar>
                <img src="https://picsum.photos/100/100?1" />
              </q-avatar>
            </q-item-section> -->

              <q-item-section class="userName">
                {{ item.name }}
                <!-- <q-item-label caption>{{ item.username }}</q-item-label> -->
              </q-item-section>

              <q-item-section
                avatar
                class="userDel"
              >
                <q-btn
                  flat
                  size="xs"
                  color="negative"
                  icon="fa-regular fa-trash-can"
                  @click.stop="delUser(item)"
                ></q-btn>
                <!-- <q-item-label caption>{{ item.username }}</q-item-label> -->
              </q-item-section>
            </q-item>
          </TransitionGroup>
        </q-list>

        <q-separator
          vertical
          inset
        />
        <div class="userTable q-px-md q-mt-sm">
          <Search
            class="input"
            v-model="search"
            @handleSearch="handleSearch"
          ></Search>
          <q-scroll-area
            style="height: 500px"
            class="q-mt-md"
            :thumb-style="thumbStyle"
          >
            <q-table
              no-data-label="请添加用户"
              v-model:selected="selected"
              v-model:pagination="pagination"
              flat
              selection="multiple"
              bordered
              @request="getpage"
              :rows="tableData"
              :columns="tableColums"
              row-key="id"
            >
              <!-- <template v-slot:top>
                <div class="q-pt-xs" v-title>
                  <div class="text-weight-medium q-mt-xs title">
                    {{ $t("page.user.list") }}
                  </div>
                </div>
              </template> -->
            </q-table>
          </q-scroll-area>
        </div>

        <!-- <q-btn unelevated color="primary" icon="add" :label="$t('pub.add')" @click.prevent="add" /> -->
      </div>
    </q-card-section>
    <div class="text-center q-mt-lg">
      <q-btn
        unelevated
        color="primary"
        class="btn"
        :label="$t('pub.submit')"
        @click.prevent="submit"
      />
      <q-btn
        unelevated
        class="q-ml-sm btn"
        outline
        :label="$t('pub.cancel')"
        @click="cancel"
      />
    </div>
  </q-card>
</template>

<style scoped>
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}

.container {
  max-width: 1050px;
  min-height: 250px;
}
.userlist {
  width: 200px;
}
.userTable {
  width: 600px;
}
.input {
  width: 220px;
}
.btn {
  width: 100px;
}

.userName {
  width: 120px;
}
.userDel {
  width: 30px;
}
</style>
